<template>
    <div class="userShop">
        <div v-if="shopInfo" class="shopInfo" @click="turn('/shop')">
            <div class="img">
                <img :src="imgH+shopInfo.avatar">
            </div>
            <div class="info">
                <div class="shopName">{{shopInfo.name}}</div>
                <div class="userName">{{shopInfo.slogan}}</div>
            </div>
            <div class="shopDraw" @click.stop="turn('/withdraw/shopDraw')">申请提现</div>
        </div>
        <div class="shopData">
            <div class="dataItem">
                <div class="num">{{totalOrderNum}}</div>
                <div class="info">总订单数</div>
            </div>
            <div class="dataItem">
                <div class="num">{{totalPrice}}</div>
                <div class="info">总订单金额</div>
            </div>
            <div class="dataItem">
                <div class="num">{{nowOrderNum}}</div>
                <div class="info">今日订单数</div>
            </div>
        </div>
        <div class="shopData" style="justify-content: flex-start">
            <div class="dataItem">
                <div class="num">{{nowPrice}}</div>
                <div class="info">今日订单金额</div>
            </div>
            <div class="dataItem">
                <div class="num">{{downIncome}}</div>
                <div class="info">已收款</div>
            </div>
            <div class="dataItem">
                <div class="num">{{totalIncome}}</div>
                <div class="info">实收款</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user-shop",
        props: {
            shopInfo: Object,
            nowOrderNum: Number,
            nowPrice: Number,
            totalOrderNum: Number,
            totalPrice: Number,
            totalIncome: Number,
            downIncome: Number

        },
        methods: {
            turn(path) {
                this.$router.push({
                    path
                })
            }
        },
        computed: {
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            }
        }
    }
</script>

<style scoped lang="stylus">
    .userShop
        background-color: #fff
        border-top-left-radius 5px
        border-top-right-radius 5px
        padding-top 30px

        .shopInfo
            padding-left 10px
            padding-right 10px
            display flex
            align-items center

            .img
                border-radius 5px

            img
                width: 47px
                height: 47px

            .info
                flex 1
                color #333
                font-size 16px
                margin-left 10px

                .shopName
                    font-weight bold

                .userName
                    color #999
                    font-size 11px
                    padding-top 9.5px

            .shopDraw
                height 30px
                width 80px
                text-align center
                background-color: #00d6c0
                border-radius 8px
                line-height 30px
                font-size 14px
                color #fff


        .shopData
            margin-top 30px
            padding-bottom 17.5px
            display flex

            .dataItem
                text-align center
                flex 25%
                color #333
                font-size 16px

                .num
                    font-family Din

                .info
                    margin-top 9px
                    font-size 10px
                    color #999

</style>